<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>单品信息-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../static/css/font.css">
	<link rel="stylesheet" href="../static/css/weadmin.css">
	<link rel="stylesheet" href="../static/css/index.css">
	<script src="../lib/layui/layui.js" charset="utf-8"></script>

</head>

<body>
	<div class="weadmin-nav">
		<span class="layui-breadcrumb" style="visibility: visible;">
			<a href="javascript:;">首页</a>
			<span lay-separator="">/</span>
			<a href="productList.html">商品管理</a>
			<span lay-separator="">/</span>
			<a href="productList.html">商品列表</a>
			<span lay-separator="">/</span>
			<a href="productList.html">所有单品</a>
		</span>
		<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
			href="javascript:location.replace(location.href);" title="刷新">
			<i class="layui-icon" style="line-height:30px">ဂ</i>
		</a>
	</div>
	<div class="weadmin-body" id="itemapp">
		<div class="weadmin-block">
			<button class="layui-btn layui-btn-danger" @click="delAll">
				<i class="layui-icon"></i>批量操作</button>
			<button class="layui-btn" onclick="WeAdminShow('添加单品','addProduct.html')">
				<i class="layui-icon"></i>新增</button>
			<span class="fr" style="line-height:40px">查询到该商品共包含 {{itemList.length}} 条单品信息</span>
		</div>
		<table class="layui-table">
			<thead>
				<tr>
					<th>
						<input @click="choiceAll($event.target.checked)" class="layui-form-checkbox" lay-skin="primary" type="checkbox"/>
					</th>
					<th>商品编号</th>
					<th>商品图片</th>
					<th>商品颜色</th>
					<th>网络类型</th>
					<th>手机内存</th>
					<th>商品单价</th>
					<th>商品库存</th>
					<th>商品状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in itemList">
					<td>
						<input v-if="defaultItemId != item.id" :value="item.id" name="check" class="layui-form-checkbox" lay-skin="primary"
							type="checkbox" />
						<span v-else>默认单品</span>
					</td>
					<td>{{item.id}}</td>
					<td><img :src="item.image"></td>
					<td>{{item.colour}}</td>
					<td>{{item.network}}</td>
					<td>{{item.edition}}</td>
					<td>{{item.price}}</td>
					<td>{{item.num}}</td>
					<td v-if="item.status == '1'">
						<p style="color:rgb(0, 255, 85);">出售中</p>
					</td>
					<td v-else-if="item.status == '2'">
						<p style="color:rgb(105, 105, 109);">已下架</p>
					</td>
					<td v-else-if="item.status == '3'">
						<p style="color:red;">已移除</p>
					</td>
					<td v-else>
						<p style="color:rgb(0, 0, 0);">未知状态</p>
					</td>
					<td class="td-manage">
						<div v-if="defaultItemId != item.id">
							<a title="修改" v-if="item.status == '1'"
								:href="'productDetails.html?itemId='+item.id+'&goodsId='+goodsId+'&defaultItemId='+defaultItemId">
								<i class="layui-icon">&#xe642;</i>
							</a>
							<a title="产品上架" v-else>
								<i class="layui-icon">&#xe64d;</i>
							</a>
							<a @click="updateItemStatus(item.id,2)" title="下架">
								<i class="layui-icon">&#xe601;</i>
							</a>
							<a @click="updateItemStatus(item.id,1)" title="上架">
								<i class="layui-icon">&#xe62f;</i>
							</a>
							<a @click="updateItemStatus(item.id,3)" title="删除">
								<i class="layui-icon">&#xe640;</i>
							</a>
						</div>
						<div v-else>
							<a title="修改" v-if="item.status == '1'"
								:href="'productDetails.html?itemId='+item.id+'&goodsId='+goodsId+'&defaultItemId='+defaultItemId">
								<i class="layui-icon">&#xe642;</i>
							</a>
							<a title="产品上架" v-else>
								<i class="layui-icon">&#xe64d;</i>
							</a>
							<a @click="promptBox" title="单品已被绑定，暂不支持该操作">
								<i class="layui-icon">&#xe601;</i>
							</a>
							<a @click="promptBox" title="单品已被绑定，暂不支持该操作">
								<i class="layui-icon">&#xe62f;</i>
							</a>
							<a @click="promptBox" title="单品已被绑定，暂不支持该操作">
								<i class="layui-icon">&#xe640;</i>
							</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>

	</div>
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/element/index.js"></script>
	<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
	<script src="../static/js/admin.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
	<script src="../static/js/controller/CommonUrl_yh.js"></script>
	<script src="../static/js/controller/product_yh.js"></script>
	<script src="../static/js/service/product_yh.js"></script>
	<script type="text/javascript">
		axios.defaults.baseURL = axios_url.baseURL;
		var vueapp = new Vue({
			el: '#itemapp',
			data: {
				itemList: null,				// 商品列表
				defaultItemId: null,		// 被绑定的单品ID
				goodsId: null,				// SPU的ID
			},
			methods: {
				// 查询所有的商品信息
				findItemFromGoodsId: product_yh_controller.findItemFromGoodsId,
				// 修改商品状态
				updateItemStatus: product_yh_controller.updateItemStatus,
				// 提示框
				promptBox: product_yh_controller.promptBox,
				// 定义全选功能
				choiceAll: product_yh_service.choiceAll,
				// 删除所有选中的商品
				delAll: product_yh_controller.delAll,
			},
			created: product_yh_service.createdItemList,
		})
	</script>
</body>

</html>